<div id="content">
<div class="box" style="width: 325px; min-height: 300px; margin-top: 40px; margin-left: auto; margin-right: auto;">
  <div class="left"></div>
  <div class="right"></div>
  <div class="heading">
    <h1 style="background-image: url('images/lockscreen.png');">กรุณาใส่ข้อมูลของคุณ.</h1>
  </div>
  <div class="content" style="min-height: 150px;">
        <form action="" method="post" enctype="multipart/form-data" id="form">
      <table style="width: 100%;">
        <tbody><tr>
          <td style="text-align: center;" rowspan="4"><img class="bigKey" src="images/login.png" alt="กรุณาใส่ข้อมูลของคุณ."></td>
        </tr>
        <tr>
          <td>ชื่อผู้ใช้:<br>
            <input type="text" name="username" id="username" style="margin-top: 4px;">
            <br>
            <br>
            รหัสผ่าน:<br>
            <input type="password" name="password" id="password"  style="margin-top: 4px;"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td style="text-align: right;"><span class="loading"></span><a class="button blue"><span>เข้าสู่ระบบ</span></a></td>
        </tr>
      </tbody></table>
          </form>
  </div>
</div>
</div>

<script type="text/javascript">

$(function() {
	
	function doLogin(){
		var user = $('#username').val();
		var pass = $('#password').val();
        /* do your AJAX call and processing here...*/
        $.ajax({
			type :'POST',
			url	 :'admin_query.php',
			data :{doLogin:true, uname:user, pwd:pass},
			dataType:'json',
			beforeSend:function(){$('.loading').html('<img src="images/loading.gif">');},
			success:function(msg){
				//alert(msg);
				$('.loading').html('');
				if(msg.status == 0){
					
					// configurations for the buzzing effect. Be careful not to make it too annoying!
					var conf = {
							frequency: 5000,
							spread: 15,
							duration: 1000
						};
					
					
					// this is the call we make when the AJAX callback function indicates a login failure 
					$(".bigKey").vibrate(conf);
					
					// let's also display a notification
					if($(".warning").text() == ""){
						$("#form").append('<p class="warning">กรุณาป้อนชื่อผู้ใช้และรหัสผ่านให้ถูกต้องด้วยค่ะ!</p>');

						// clear the fields to discourage brute forcing 						
						$("#username").val("");
						$("#password").val("");	
						$("#username").focus();

						return false;
					}
				}else if(msg.status == 1){
					location.href='?m=index';
				}
				
			} 
		});        
        	
	}
    $(".button").click( function() {
		doLogin();
    });
	
	$('#form input').keydown(function(e) {
		if (e.keyCode == 13) {
			doLogin();
			return false;
		}
	});
    
});
</script>